// src/components/sponsorDashboard/header/Headline.tsx

import { FaDownload } from 'react-icons/fa';

interface HeadlineProps {
  onDownload?: () => void;
  downloading?: boolean;
  hasData?: boolean;
}

const Headline = ({ onDownload, downloading, hasData }: HeadlineProps) => {
  return (
    <header className="flex flex-row items-center justify-between pb-5 px-2 sm:px-6 bg-white/95 dark:bg-slate-900/95 backdrop-blur border-b border-gray-200 dark:border-slate-800 shadow-xl dark:shadow-2xl transition-all duration-300">
      <h2 className="pl-5 text-xl sm:text-2xl md:text-3xl lg:text-4xl font-extrabold select-none font-poppins tracking-tight text-blue-700 dark:text-cyan-300 drop-shadow-sm">
        Sponsors Dashboard
      </h2>
      
      {onDownload && (
        <button
          onClick={onDownload}
          disabled={downloading || !hasData}
          className={`mr-5 flex items-center gap-2 px-3 sm:px-4 py-2 rounded-xl font-medium transition-all duration-200 text-sm sm:text-base ${
            downloading || !hasData
              ? 'bg-gray-300 dark:bg-slate-600 text-gray-500 dark:text-gray-400 cursor-not-allowed'
              : 'bg-blue-600 dark:bg-cyan-700 text-white hover:bg-blue-700 dark:hover:bg-cyan-800 hover:shadow-lg'
          }`}
          title={!hasData ? 'No data to download' : 'Download current table data'}
        >
          {downloading ? (
            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
          ) : (
            <FaDownload className="text-sm" />
          )}
          <span className="hidden sm:inline">
            {downloading ? 'Downloading...' : 'Download Table'}
          </span>
          <span className="sm:hidden">
            {downloading ? '...' : 'Download'}
          </span>
        </button>
      )}
    </header>
  );
};

export default Headline;